<template>
  <a-layout-sider
    :class="['sider', 'shadow', theme, fixSidebar ? 'ant-fixed-sidemenu' : null]"
    width="256px"
    v-model="collapsed"
    :trigger="null"
  >
    <logo :primaryColor="primaryColor" />
    <s-menu :collapsed="collapsed" @select="selectMenu" :menu="menus" :theme="theme" />
  </a-layout-sider>
</template>

<script>
  import { getMenus } from '@/utils/token'
  import Logo from '@/components/base/tools/Logo'
  import SMenu from './index'
  import { mapState, mapActions } from 'vuex'
  export default {
    name: 'SideMenu',
    components: { Logo, SMenu },
    data() {
      return {
        menus: [],
      }
    },
    props: {
      primaryColor: {
        type: String,
        required: true,
      },
      theme: {
        type: String,
        required: false,
        default: 'dark',
      },
      collapsed: {
        type: Boolean,
        required: false,
        default: false,
      },
      fixSidebar: {
        type: [Boolean, String],
        required: false,
        default: false,
      },
    },
    // computed: {
    //   ...mapState({
    //     menus: state => state.SysMenu.currentMenuList,
    //   }),
    // },
    methods: {
      // ...mapActions({
      //   getCurrentMenu: 'SysMenu/onCurrentMenu',
      // }),
      selectMenu(val) {
        // debugger
        // console.log(val)
        this.$router
      },
    },
    created() {
      // console.log(this.$store.state.SysMenu.currentMenuList)
      this.menus = getMenus()//this.$store.state.SysMenu.curMenuList
      // console.log(this.menus)
      // console.log(this.menus)
      // let vm = this
      // this.menus = this.$store.state.SysMenu.currentMenuList
      // this.getCurrentMenu({}).then(function(res) {
      //   vm.menus = res
      // })
    },
  }
</script>

<style scoped lang="less"></style>
